<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('功能扩展')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal m" id="form-GoodsInfo-add" method="post" enctype="multipart/form-data" >
        <div class="ibox-content">
            <h4 class="form-header h5">商品信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">主标题：</label>
                <div class="col-sm-8">
                    <input name="mianTitle" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">副标题：</label>
                <div class="col-sm-8">
                    <input name="subTitle" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">售价：</label>
                <div class="col-sm-8">
                    <input name="price" class="form-control" type="number" minlength="1" maxlength="10" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">起购台数：</label>
                <div class="col-sm-8">
                    <input name="nums" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" class="form-control" type="number" minlength="1" maxlength="10" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">划线价：</label>
                <div class="col-sm-8">
                    <input name="oldPrice"  class="form-control" type="number" minlength="1" maxlength="10" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">成本价格：</label>
                <div class="col-sm-8">
                    <input name="costPrice"  class="form-control" type="number" minlength="1" maxlength="10" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">运费：</label>
                <div class="col-sm-8">
                    <input name="freightMoney"  class="form-control" type="number" minlength="1" maxlength="10" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">介绍详情：</label>
                <div class="col-sm-8">
                    <textarea name="details" maxlength="300" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">状态：</label>
                <div class="col-sm-8" >
                    <label class="radio-box"> <input type="radio"   name="state" value="1"/> 上架 </label>
                    <label class="radio-box"> <input type="radio"   name="state" value="2"/> 下架</label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">终端类型：</label>
                <div class="col-sm-8">
                    <select name="posType" class="form-control m-b">
                        <option value="4">电签</option>
                        <option value="0">传统</option>
                        <option value="5">GB传统</option>
                        <option value="6">GB电签</option>
                        <option value="7">GB电签二</option>

                    </select>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-3 control-label is-required">库存：</label>
                <div class="col-sm-8">
                    <input name="stock" class="form-control" type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">虚拟库存：</label>
                <div class="col-sm-8">
                    <input name="fictitiousStock" class="form-control" type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" required>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-3 control-label is-required">预警库存：</label>
                <div class="col-sm-8">
                    <input name="stockEarlyWarning" class="form-control" type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" required>
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-3 control-label is-required">排序：</label>
                <div class="col-sm-8">
                    <input name="sorts" class="form-control" type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">备注：</label>
                <div class="col-sm-8">
                    <textarea name="remarks" maxlength="300" class="form-control" rows="3" required></textarea>
                </div>
            </div>
            <h4 class="form-header h5">图片信息</h4>
            <div class="form-group">
                <label  class="col-sm-3 control-label is-required" >首页图:</label>
                <br/>
                <div class="col-sm-8">
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input id="home" name="home" type="file"></span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                </div>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label is-required">详情图:</label>
                <br/>
                <div class="col-sm-8" id="lb" style="vertical-align:top">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                        <div>
                            <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input onchange="lbInsert(this)"  name="lbImg" type="file"></span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a><br><br>
                            <a href="javascript:void(0);" style='margin-left: 110px;margin-top: -90px;display: none' class="btn btn-white b" ></a><br>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-3 control-label is-required">轮播图:</label>
                <br/>
                <div class="col-sm-8" id="detail" style="vertical-align:top">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                        <div>
                            <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input onchange="detailInsert(this)"  name="detailImg" type="file"></span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a><br><br>
                            <a href="javascript:void(0);" style='margin-left: 110px;margin-top: -90px;display: none' class="btn btn-white b" ></a><br>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-3 control-label is-required">活动图:</label>
                <br/>
                <div class="col-sm-8" id="hd" style="vertical-align:top">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                        <div>
                            <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input onchange="hdInsert(this)"  name="hdImg" type="file"></span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a><br><br>
                            <a href="javascript:void(0);" style='margin-left: 110px;margin-top: -90px;display: none' class="btn btn-white b" ></a><br>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jasny-bootstrap-js" />
<th:block th:include="include :: utils-js" />
<script th:inline="javascript">
    var prefix = ctx + "GoodsInfo/GoodsInfo";


    /**
     * 新增轮播图节点
     */
    function lbInsert(obj) {
        if (obj.value.length == 0)return;
        var html  = " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">\n" +
            "                        <div class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\"></div>\n" +
            "                        <div>\n" +
            "                            <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input name='lbImg' onchange='lbInsert(this)'  type=\"file\"></span>\n" +
            "                            <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
            "                            <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a>\n" +
            "                        </div>\n" +
            "                    </div>";
        $("#lb").append(html);
        bindClick();
    }

    /**
     * 新增详情图节点
     */
    function detailInsert(obj) {
        if (obj.value.length == 0)return;
        var html  = " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">\n" +
            "                        <div class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\"></div>\n" +
            "                        <div>\n" +
            "                            <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input onchange='detailInsert(this)'  name=\"detailImg\" type=\"file\"></span>\n" +
            "                            <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
            "                            <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a>\n" +
            "                        </div>\n" +
            "                    </div>";
        $("#detail").append(html);
        bindClick();
    }


    /**
     * 新增活动节点
     */
    function hdInsert(obj) {
        if (obj.value.length == 0)return;
        var html  = " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">\n" +
            "                        <div class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" style=\"width: 200px; height: 150px;\"></div>\n" +
            "                        <div>\n" +
            "                            <span class=\"btn btn-white btn-file\"><span class=\"fileinput-new\">选择图片</span><span class=\"fileinput-exists\">更改</span><input onchange='hdInsert(this)'  name=\"hdImg\" type=\"file\"></span>\n" +
            "                            <a href=\"#\" class=\"btn btn-white fileinput-exists\" data-dismiss=\"fileinput\">清除</a><br><br>\n" +
            "                            <a href=\"javascript:void(0);\" style='margin-left: 110px;margin-top: -90px;' class=\"btn btn-white b\" >删除图片</a>\n" +
            "                        </div>\n" +
            "                    </div>";
        $("#hd").append(html);
        bindClick();
    }


    /**
     * 绑定一个删除操作
     * */
    function bindClick() {
        $("body").on("click",".b",function () {
            $(this).parents(".fileinput-new").remove();
        });

    }




    function submitHandler() {
        if ($.validate.form()) {
            if (!$.vali.money($("input[name='price']").val())){
                $.modal.alertError("请输入正确的售价");
                return;
            }
            if (!$.vali.money($("input[name='oldPrice']").val())){
                $.modal.alertError("请输入正确的划线价");
                return;
            }
            if (!$.vali.money($("input[name='costPrice']").val())){
                $.modal.alertError("请输入正确的成本价");
                return;
            }
            if ($("input[name='price']").val() > $("input[name='oldPrice']").val()){
                $.modal.alertError("售价不能高于划线价");
                return;
            }

            //首页图
            var home = $("input[name='home']").val();
            if (home == ''){
                $.modal.alertError("首页图不能为空");
                return;
            }
            //详情图
            var lbImg = $("input[name='lbImg']").val();
            if (lbImg == ''){
                $.modal.alertError("至少上传一张详情图");
                return;
            }
            //轮播图
            var detailImg = $("input[name='detailImg']").val();
            if (detailImg == ''){
                $.modal.alertError("至少上传一张轮播图");
                return;
            }

            var formData = new FormData($("#form-GoodsInfo-add")[0]);
            $.ajax({
                url: prefix + "/adds",
                data: formData,
                type: "post",
                cache: false,
                dataType: "json",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                },
                success: function (result) {
                    if (result.code == '0') {
                        $.operate.successCallback(result);
                    }else {
                        $.modal.alertError(result.msg);
                    }
                    $.modal.closeLoading();
                },
            })
        }
    }



</script>
</body>
</html>
